<?xml version='1.0' encoding='UTF-8' ?>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:f="http://java.sun.com/jsf/core">
    <body>
        <ui:composition template="/common/templates/common.xhtml">
            <ui:param name="titulo" value="Compras" />

            <ui:define name="body">
                <a4j:form id="Cliente" ajaxSubmit="true">
                    <rich:panel>
                        <rich:messages passedLabel="Data is allowed to be stored." layout="list">
                            <f:facet name="header">
                                <h:outputText value="Entered Data Status:"></h:outputText>
                            </f:facet>
                            <f:facet name="infoMarker">
                                <h:graphicImage  value="/img/passed_.gif" />
                            </f:facet>
                            <f:facet name="errorMarker">
                                <h:graphicImage value="/img/error_.gif" />
                            </f:facet>
                        </rich:messages>
                    </rich:panel>
                    <h:panelGrid id="panelGridInsertar" columns="1">
                        <rich:panel id="panelInsertar" >
                            <f:facet name="header">
                                <h:outputText id="labelTitulo" value="Buscar Cliente"/>
                            </f:facet>
                            <h:panelGrid id="pGridInput"  columns="2">
                                <h:outputLabel id="tipoDocumento" value="#{Messages['insert.cliente.tipoDocumento']}"/>
                                <h:selectOneMenu value="#{ClienteListBean.tipoDocumento}">
                                    <f:selectItems value = "#{ClienteListBean.listaTiposDocumento}"/>
                                </h:selectOneMenu>

                                <h:outputLabel id="labelNumeroDoc" value="#{Messages['insert.cliente.numeroDocumento']}"/>
                                <h:inputText id="numeroDocumento" value="#{ClienteListBean.numeroDocumento}">
                                    <rich:toolTip id="toolTipprodDescription" value="#{Messages['insert.cliente.numeroDocumento']}" style="padding:10px;" />
                                </h:inputText>

                                <h:outputLabel id="labelNombre" value="#{Messages['insert.cliente.nombreCompleto']}"/>
                                <h:inputText id="nombreCompleto" value="#{ClienteListBean.nombreCompleto}">
                                    <rich:toolTip id="toolTipNombre" value="#{Messages['insert.cliente.nombreCompleto']}" style="padding:10px;" />
                                </h:inputText >

                                <h:outputLabel id="labelTelefono" value="#{Messages['insert.cliente.telefono']}"/>
                                <h:inputText id="telefono" value="#{ClienteListBean.telefonoResidencia}">
                                    <rich:toolTip id="toolTipTelefono" value="#{Messages['insert.cliente.telefono']}" style="padding:10px;" />
                                </h:inputText >


                                <h:outputLabel id="labelDireccion" value="#{Messages['insert.cliente.direccion']}"/>
                                <h:inputText id="direccion" value="#{ClienteListBean.direccion}">
                                    <rich:toolTip id="toolTipDireccion" value="#{Messages['insert.cliente.direccion']}" style="padding:10px;" />
                                </h:inputText >

                                <h:outputLabel id="pais" value="#{Messages['insert.cliente.pais']}"/>
                                <h:selectOneMenu value="#{ClienteListBean.pais}">
                                    <f:selectItems value = "#{ClienteBean.listaPaises}"/>
                                </h:selectOneMenu>

                                     <h:outputLabel id="departamento" value="#{Messages['insert.cliente.departamento']}"/>
                                     <h:selectOneMenu value="#{ClienteListBean.departamento}">
                                         <f:selectItems value = "#{ClienteListBean.listaDepartamento}"/>
                                     </h:selectOneMenu>

                                     <h:outputLabel id="ciudades" value="#{Messages['insert.cliente.ciudad']}"/>
                                     <h:selectOneMenu value="#{ClienteListBean.ciudadResidencia}">
                                         <f:selectItems value = "#{ClienteListBean.listaCiudades}"/>
                                     </h:selectOneMenu>

                                <h:outputLabel id="labelEmail" value="#{Messages['insert.cliente.email']}"/>
                                <h:inputText id="email" value="#{ClienteListBean.email}">
                                    <rich:toolTip id="toolTipEmail" value="#{Messages['insert.cliente.email']}" style="padding:10px;" />
                                </h:inputText >

                            </h:panelGrid>
                        </rich:panel>
                    </h:panelGrid>

                    <h:panelGrid id="panelGridButton" columns="3">
                        <a4j:commandButton id="btnBuscar" eventsQueue="foo2" value="#{Messages['common.search']}">
                            <a4j:support action="#{ClienteListBean.buscarCliente}" event="onclick" reRender="TablaCliente"/>
                        </a4j:commandButton>
                        <h:outputText id="space" value="" escape="false"/>
                        <h:commandButton id="btnInsert" value="#{Messages['insert.cliente']}" action="#{ClienteListBean.crearCliente}" immediate="true" />
                        <h:outputText id="space4" value="" escape="false"/>


                    </h:panelGrid>
                    <a4j:status>
                        <f:facet name="start">
                         <h:graphicImage  value="/img/ieloop.gif"/>
                         </f:facet>
                    </a4j:status>

               <a4j:outputPanel ajaxRendered="true">
                <h:panelGrid>
                    <rich:dataTable id="TablaCliente" value="#{ClienteListBean.listadoClientes}" binding="${ClienteListBean.tabla}"
                    var="cliente" rows="2" rendered="#{ClienteListBean.mostrarTabla}">
                        <f:facet name="header">
                            <rich:columnGroup>
                                <rich:column>
                                    <h:outputLabel value="#{Messages['insert.cliente.tipoDocumento']}"/>
                                </rich:column>
                                <rich:column>
                                    <h:outputLabel value="#{Messages['insert.cliente.numeroDocumento']}"/>
                                </rich:column>
                                <rich:column>
                                    <h:outputLabel value="#{Messages['insert.cliente.nombreCompleto']}"/>
                                </rich:column>
                                <rich:column>
                                    <h:outputLabel value="#{Messages['insert.cliente.telefono']}"/>
                                </rich:column>
                                <rich:column>
                                    <h:outputLabel value="#{Messages['insert.cliente.direccion']}"/>
                                </rich:column>
                                <rich:column>
                                    <h:outputLabel value="#{Messages['insert.cliente.ciudad']}"/>
                                </rich:column>
                                <rich:column>
                                    <h:outputLabel value="#{Messages['insert.cliente.departamento']}"/>
                                </rich:column>
                                <rich:column>
                                    <h:outputLabel value="#{Messages['insert.cliente.pais']}"/>
                                </rich:column>
                                <rich:column>
                                    <h:outputLabel value="#{Messages['insert.cliente.email']}"/>
                                </rich:column>
                                <rich:column>
                                    <h:outputLabel value="#{Messages['common.edit']}"/>
                                </rich:column>
                                <rich:column>
                                    <h:outputLabel value="#{Messages['common.delete']}"/>
                                </rich:column>

                            </rich:columnGroup>
                        </f:facet>
                        <rich:columnGroup>
                            <rich:column>
                                <h:outputText id="idTipoDocumento" value="#{cliente.tipoDocumento}"/>
                            </rich:column>
                            <rich:column>
                                <h:outputText id="idNumeroDocumento" value="#{cliente.numeroDocumento}"/>
                            </rich:column>
                            <rich:column>
                                <h:outputText id="idNombre" value="#{cliente.nombreCompleto}"/>
                            </rich:column>
                            <rich:column>
                                <h:outputText id="idTelefono" value="#{cliente.telefonoResidencia}"/>
                            </rich:column>
                            <rich:column>
                                <h:outputText id="idDireccion" value="#{cliente.direccion}"/>
                            </rich:column>
                            <rich:column>
                                <h:outputText id="idCiudad" value="#{cliente.ciudadResidencia.nombre}"/>
                            </rich:column>
                            <rich:column>
                                <h:outputText id="idDepartamento" value="#{cliente.ciudadResidencia.departamento.nombre}"/>
                            </rich:column>
                            <rich:column>
                                 <h:outputText id="idPais" value="#{cliente.ciudadResidencia.departamento.pais.pais}"/>
                            </rich:column>
                            <rich:column>
                                <h:outputText id="idEmail" value="#{cliente.email}"/>
                            </rich:column>

                            <rich:column>
                                <a4j:commandLink action="#{ClienteListBean.editarCliente}">
                                    <h:graphicImage alt="#{Messages['common.edit']}" url="/img/user_edit.ico" title="Editar" border="0"/>
                                </a4j:commandLink>
                            </rich:column>
                            <rich:column>
                                <a4j:commandLink id="link" action="#{ClienteListBean.obtenerClienteEliminar}">
                                   <h:graphicImage alt="#{Messages['coomon.delete']}" url="/img/user_delete.ico" title="Eliminar" border="0"/>
                                   <rich:componentControl for="panel" attachTo="link" operation="show" event="onclick"/>
                              </a4j:commandLink>
                              
                            </rich:column>
                        </rich:columnGroup>
                        <f:facet name="footer">
                            <rich:datascroller id="dataScroll"></rich:datascroller>
                        </f:facet>
                    </rich:dataTable>
                </h:panelGrid>
                </a4j:outputPanel>
                <rich:modalPanel id="panel" width="350" height="100">
                        <f:facet name="header">
                            <h:panelGroup>
                                <h:outputText value="Eliminar Cliente"></h:outputText>
                            </h:panelGroup>
                        </f:facet>
                        <f:facet name="controls">
                        </f:facet>
                        <h:outputText value="#{Messages['list.borrarCliente']}"/>
                        <h:panelGrid id="panelBotones" columns="3">
                            <a4j:commandButton id="btnEliminar" action="#{ClienteListBean.borrarCliente}" value="#{Messages['common.delete']}" reRender="TablaCliente">
                                <rich:componentControl for="panel" attachTo="btnEliminar" operation="hide" event="onclick"/>
                            </a4j:commandButton>
                            <h:outputText id="space3" value="" escape="false"/>
                            <h:commandButton id="btnCancelar" value="#{Messages['common.cancel']}">
                                <rich:componentControl for="panel" attachTo="btnCancelar" operation="hide" event="onclick"/>
                            </h:commandButton>
                        </h:panelGrid>
                    </rich:modalPanel>
                 </a4j:form>

            </ui:define>
        </ui:composition>
    </body>
</html>